<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">长期待摊费用</span>
          <div>
            <button class="common_header_btn">同步数据</button>
            <select class="common_header_select">
              <option value="1">111</option>
              <option value="2">222</option>
              <option value="3">333</option>
            </select>
            <button class="common_header_btn">添加</button>
            <button class="common_header_btn">批量导入</button>
            <button class="common_header_btn">批量删除</button>
          </div>
        </div>

        <table class="common_table" cellspacing="0" cellpadding="0">
          <thead>
          <tr>
            <th><input type="checkbox"></th>
            <th>年月</th>
            <th>类型</th>
            <th>费用金额(元)</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item ,index) in peopleLIST" :key="index">
            <td><input type="checkbox"></td>
            <td v-for="(items , indexs) in item" :key="indexs">
              <span>{{items}}</span>
            </td>
            <td class="operation_td">
              <span class="common_table_editBTN">编辑</span>
              <span class="common_table_delBTN">删除</span>
            </td>
          </tr>
          </tbody>
        </table>

        <!--添加的弹框-->
        <div class="tankuang_box" v-if="boxISshow">
          <!--里面的白色盒子（需要自己设置宽高）-->
          <div class="add_tankuang">
            <!--顶部的文字和叉叉（通用）-->
            <div class="add_tankuang_header">
              <span>添加</span>
              <i class="iconfont icon-guanbi" @click="closeBox"></i>
            </div>
            <div class="add_tankuang_content">
              <div class="add_tankuang_content_box">
                <!--这里的内容是根据需要的内容加入（不通用）-->
                <ul class="common_tankuang_content">
                  <li>
                    <span>选择年月：</span>
                    <input type="text">
                  </li>
                  <li>
                    <span>选择类型：</span>
                    <!--<input type="text">-->
                    <select>
                      <option value="改建">改建</option>
                      <option value="改装">改装</option>
                      <option value="装修">装修</option>
                      <option value="修理">修理</option>
                    </select>
                  </li>
                  <li>
                    <span>费用金额(元)：</span>
                    <input type="text">
                  </li>
                </ul>
                <!--底部的按钮（通用）-->
                <div class="add_tankuang_btnBOX">
                  <button class="add_tankuang_btn add_tankuang_btn_first" @click="save">保存</button>
                  <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--删除确认框 -->
        <div class="tankuang_box" v-if="delISshow">
          <div class="tankuang">
            <p class="tankuangMSG">确认删除吗？</p>
            <div class="tankuang_btn_box">
              <button class="tankuang_ok_btn" @click="delBTN">确认</button>
              <button class="tankuang_ok_btn" @click="cancelDel">取消</button>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  export default {
    name: 'cost_daitan_detail',
    components: {
      Routers,
      Header
    },
    data () {
      return {
        peopleLIST:[
          ['1972-06','改装',678.56],
          ['1972-06','装修',666],
        ],
        boxISshow:false,
        delISshow:false
      }
    },
    mounted: function() {
      console.log(this.$route.params.id)
    },
    methods: {
      save () {
        this.boxISshow = !this.boxISshow
      },
      cancelSave () {
        this.boxISshow = !this.boxISshow
      },
      closeBox () {
        this.boxISshow = !this.boxISshow
      },
      delBTN () {
        this.delISshow = !this.delISshow
      },
      cancelDel () {
        this.delISshow = !this.delISshow
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  .add_tankuang{
    width:594px;
    height:396px;
  }
  .common_tankuang_content{
    padding:40px 0;
    display: block;
  }
  .common_tankuang_content>li{
    flex:1;
  }
  .common_tankuang_content input{
    width:210px!important;
  }
  .common_tankuang_content select{
    width:210px!important;
  }
  .common_tankuang_content span{
    width:200px;
  }
  .tankuang{
    width:300px;
    height:157px;
    padding:30px;
  }
  .tankuang_ok_btn{
    padding:6px 15px;
    font-size:16px;
    width:110px;
  }

</style>
